import { getAssetsImages } from '@/utils'
import { defineComponent, ref } from 'vue'
import styles from './evaluateContent.module.less'

// 评价
export default defineComponent({
  setup() {
    const customerList = ref([
      {
        name: '枫叶卡-张先生',
        avatar: getAssetsImages('kehu1.png')
      },
      {
        name: '枫叶卡-张先生',
        avatar: getAssetsImages('kehu2.png')
      },
      {
        name: '枫叶卡-张先生',
        avatar: getAssetsImages('kehu3.png')
      },
      {
        name: '枫叶卡-张先生',
        avatar: getAssetsImages('kehu4.png')
      },
      {
        name: '枫叶卡-张先生',
        avatar: getAssetsImages('kehu5.png')
      }
    ])
    const leftEvent = () => {
      const firstItem = customerList.value[0]
      customerList.value.shift()
      customerList.value.push(firstItem)
    }
    const rightEvent = () => {
      const lastItem = customerList.value[customerList.value.length - 1]
      customerList.value.pop()
      customerList.value.unshift(lastItem)
    }
    return () => (
      <div class={styles['evaluate-container']}>
        <div class={styles['evaluate-content']}>
          <p class={styles['header-text']} data-aos="fade-up">
            我们的客户说
          </p>
          <div class={styles['header-line']}></div>
          <p class={styles['sub-text']} data-aos="fade-up" data-aos-delay="100">
            客户的满意是我们最大的追求
          </p>
          <div class={styles.fuhao}></div>
          <p class={styles['content-text']} data-aos="fade-up" data-aos-delay="200">
            比邻旗下拥有一支经验丰富、创意无限的设计团队，具备深厚的艺术修养和丰富的实战经验。
            <br />
            他们紧跟国际潮流趋势，充分尊重客户需求，量身定制独一无二的设计方案，力求将美学、功能与实用性完美融合，施工队伍技能娴熟、纪律严明，确保工程质量精益求精。所有材料均符合国家环保标准，为客户提供健康、绿色的生活环境。打造舒适、时尚、符合个性审美的理想空间。
          </p>
          <div class={styles.fuhao}></div>
          <div class={styles['kehu-banner']}>
            <div class={styles['left-box']} onClick={leftEvent}></div>
            <ul class={styles['avatar-list']}>
              {customerList.value.map((item, index) => {
                return (
                  <li class={styles['avatar-item']}>
                    {index == 2 ? <span class={styles['avatar-text']}>{item.name}</span> : <></>}
                    <img src={item.avatar} alt="avatar" class={styles['avatar-img']} />
                  </li>
                )
              })}
            </ul>
            <div class={styles['right-box']} onClick={rightEvent}></div>
          </div>
        </div>
      </div>
    )
  }
})
